<template>
	<div class="word-container">
		<div class="forts">
			欢 迎 使 用 学 籍 管 理 系 统
		</div>
		<Time class="forts-time" />
	</div>
	<div class="student-info">
		学生信息操作
	</div>

	<!-- 学生信息查询 -->
	<div class="buttom-student-select">
		<el-button @click='goToStudentSelect()' plain>学生信息查询</el-button>
	</div>
	<!-- 学生信息录入 -->
	<div class="buttom-student-insert">
		<el-button @click='goToStudentInsert()' plain>学生信息录入</el-button>
	</div>

	<!-- 学生信息修改 -->
	<div class="buttom-student-update">
		<el-button @click='goToStudentUpdate()' plain>学生信息修改</el-button>
	</div>
	<!-- 学生信息删除 -->
	<div class="buttom-student-delete">
		<el-button @click='goToStudentDelete()' plain>学生信息删除</el-button>
	</div>
	<!-- 学生按年龄统计 -->
	<div class="buttom-student-static-age">
		<el-button @click='goToAgeStatic()' plain>按年龄统计学生</el-button>
	</div>
	<!-- 学生按政治面貌统计 -->
	<div class="buttom-student-static-pol">
		<el-button @click='goToPoliticStatic()' plain>按政治面貌统计学生</el-button>
	</div>
	<!-- 学生按生源地统计 -->
	<div class="buttom-student-static-loc">
		<el-button @click='goToLocationStatic()' plain>按生源地统计学生</el-button>
	</div>

	<div class="score-info">
		学生成绩操作
	</div>
	<!-- 学生成绩查询 -->
	<div @click='goToScoreSelect()' class="buttom-score-search">
		<el-button plain>学生成绩查询</el-button>
	</div>
	<!-- 学生成绩修改 -->
	<div @click='goToScoreUpdate()' class="buttom-score-update">
		<el-button>学生成绩修改</el-button>
	</div>
	<!-- 学生成绩统计 -->
	<div @click='goToScoreStatic()' class="buttom-score-static">
		<el-button plain>学生成绩统计</el-button>
	</div>
	<img src="../assets/logo.png" alt="" />
</template>

<script>
	import Time from "./Time.vue";
	export default {
		name: "MainMenu",
		components: {
			Time,

		},
		methods: {
			goToStudentSelect() {
				//直接跳转
				this.$router.push('/info/select');
			},
			goToStudentInsert() {
				//直接跳转
				this.$router.push('/info/insert');
			},
			goToStudentUpdate() {
				//直接跳转
				this.$router.push('/info/update');
			},
			goToStudentDelete() {
				//直接跳转
				this.$router.push('/info/delete');
			},
			goToAgeStatic() {
				//直接跳转
				this.$router.push('/statistic/age');
			},
			goToPoliticStatic() {
				//直接跳转
				this.$router.push('/statistic/politic');
			},
			goToLocationStatic() {
				//直接跳转
				this.$router.push('/statistic/location');
			},
			goToScoreSelect() {
				//直接跳转
				this.$router.push('/score/search');
			},
			goToScoreUpdate() {
				//直接跳转
				this.$router.push('/score/update');
			},
			goToScoreStatic() {
				//直接跳转
				this.$router.push('/statistic/score');
			},
		},
	}
</script>

<style>
	.forts {
		font-size: 40px;
	}

	.forts-time {
		font-size: 40px;
		position: absolute;
		left: 70%;
		top: 0%;
	}

	.word-container {
		width: 100%;
		height: 60px;
		background-color: #c4b8ff;
		border-radius: 3px;
	}

	.student-info {
		font-size: 20px;
		position: absolute;
		top: 20%;
		left: 25%;
	}

	.score-info {
		font-size: 20px;
		position: absolute;
		top: 20%;
		left: 65%;
	}

	.buttom-student-select {
		font-size: 20px;
		position: absolute;
		top: 25%;
		left: 25%;
	}

	.buttom-student-insert {
		font-size: 20px;
		position: absolute;
		top: 32%;
		left: 25%;
	}

	.buttom-student-update {
		font-size: 20px;
		position: absolute;
		top: 39%;
		left: 25%;
	}

	.buttom-student-delete {
		font-size: 20px;
		position: absolute;
		top: 46%;
		left: 25%;
	}

	.buttom-student-static-age {
		font-size: 20px;
		position: absolute;
		top: 53%;
		left: 25%;
	}

	.buttom-student-static-loc {
		font-size: 20px;
		position: absolute;
		top: 60%;
		left: 25%;
	}

	.buttom-student-static-pol {
		font-size: 20px;
		position: absolute;
		top: 67%;
		left: 25%;
	}

	.buttom-score-search {
		font-size: 20px;
		position: absolute;
		top: 25%;
		left: 65%;
	}

	.buttom-score-update {
		font-size: 20px;
		position: absolute;
		top: 32%;
		left: 65%;
	}

	.buttom-score-static {
		font-size: 20px;
		position: absolute;
		top: 39%;
		left: 65%;
	}

	img {
		width: 370px;
		opacity: 0.4;
		filter: alpha(opacity=40);
		/* 针对 IE8 以及更早的版本 */
		position: absolute;
		top: 47%;
		left: 70%;
	}
</style>
